<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<link rel="icon" href="/favicon.ico" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Svelte + TS + Vite App</title>
		<style>
			main {
				font-family: Helvetica, Arial, sans-serif;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				text-align: left;
				color: #2c3e50;
				font-size: 16px;
				line-height: 1.5;
			}

			/* Sections */
			section {
				border-bottom: 1px dotted #ccc;
				padding: 16px;
			}
			section:last-child {
				border-bottom-width: 0;
			}
			section:after {
				content: ' ';
				display: table;
				clear: both;
			}
			h1,
			h2 {
				margin: 0 0 16px;
				padding: 0;
				font-size: 24px;
				font-weight: normal;
			}
			h2 {
				margin: 16px 0;
				font-size: 20px;
			}
			h1 + h2 {
				margin-top: -8px;
			}
			p {
				margin: 12px 0 4px;
				padding: 0;
			}

			/* Tests */
			.test-row {
				font-size: 16px;
				line-height: 1.5;
			}
			.test-row-icons {
				padding-right: 4px;
			}
			.test-row-icons > :is(svg, span) {
				color: #afafaf;
				display: none;
			}
			.test-row-icons > :is(svg, span).visible {
				display: inline-block;
			}
			.test-row-icons > :is(svg, span).success {
				color: #327335;
			}
			.test-row-icons > :is(svg, span).failed {
				color: #ba3329;
			}

			/* 24px icon */
			.icon-24 :is(svg, span) {
				font-size: 24px;
				line-height: 1;
				vertical-align: -0.25em;
			}

			/* Alert demo */
			.alert {
				position: relative;
				margin: 8px;
				padding: 16px;
				padding-left: 48px;
				background: #ba3329;
				color: #fff;
				border-radius: 5px;
				float: left;
			}

			.alert + div {
				clear: both;
			}

			.alert :is(svg, span) {
				position: absolute;
				left: 12px;
				top: 50%;
				font-size: 24px;
				line-height: 1em;
				margin: -0.5em 0 0;
			}

			/* Checkbox component */
			.checkbox-container {
				margin: 8px 0;
			}

			.checkbox {
				cursor: pointer;
				/* color: #1769aa; */
				color: #626262;
				text-decoration: none;
			}
			.checkbox:hover {
				color: #ba3329;
				text-decoration: underline;
			}

			.checkbox :is(svg, span) {
				margin-right: 4px;
				color: #afafaf;
				font-size: 24px;
				line-height: 1em;
				vertical-align: -0.25em;
			}
			.checkbox--checked :is(svg, span) {
				color: #327335;
			}
			.checkbox:hover :is(svg, span) {
				color: inherit;
			}

			.checkbox-container small {
				margin-left: 4px;
				opacity: 0.7;
			}

			/* Inline demo */
			.inline-demo :is(svg, span) {
				color: #06a;
				margin: 0 8px;
				position: relative;
				z-index: 2;
				background: #fff;
			}
			.inline-demo div {
				position: relative;
				font-size: 16px;
				line-height: 1.5;
			}
			.inline-demo div:before,
			.inline-demo div:after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				height: 0;
				border-top: 1px dashed #506874;
				opacity: 0.5;
				z-index: -1;
			}
			.inline-demo div:before {
				bottom: 5px;
			}
			.inline-demo div:after {
				bottom: 7px;
				border-top-color: #ba3329;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script type="module" src="/src/main.ts"></script>
	</body>
</html>
